<template>
  <div
    v-loading="pageLoading"
    class="app-container"
    style="display: flex; flex-direction: column"
  >
    <!-- 搜索项 -->
    <div class="catalog">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="transparent"
        text-color="#2979ff"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="(item, itemIndex) in pageList"
          :key="item.id"
          :index="itemIndex + ''"
          >{{ item.itemLabel }}</el-menu-item
        >
      </el-menu>
    </div>
    <el-row :gutter="0">
      <!-- <el-col :lg="cardGrid.lg" :md="cardGrid.md" :sm="24" :xs="24"> -->
      <el-col :lg="24" :md="24" :sm="24" :xs="24">
        <!-- 卡片内容 -->
        <div
          class="bg-#fff !pb-[10px] of-hidden rounded-[8px]"
          style="min-height: 250px"
          v-loading="deviceLoading"
        >
          <el-empty
            v-if="!deviceList.length && !deviceLoading"
            :image-size="200"
            :image="pic3"
          />

          <div v-for="(item, index) in deviceList" :key="index">
            <div v-if="item.deviceList?.length">
              <p class="produce-c-title">
                <svg-icon icon-class="title" />{{ item.locationName }}
              </p>
              <div class="table-container-scroll pl-[5px] pr-[5px]">
                <ul>
                  <li
                    v-for="(self, selfIndex) in item.deviceList"
                    :key="selfIndex"
                    @click="jumpUrl(self)"
                  >
                    <div class="card-item">
                      <div
                        class="card-white-title"
                        :class="
                          self.equipMonitorStatusName === '报警'
                            ? `redColor`
                            : self.equipMonitorStatusName === '离线'
                            ? `greyColor`
                            : `greenColor`
                        "
                      >
                        <span>{{ self.equipName }}</span>
                      </div>

                      <div class="card-content">
                        <div class="card-left">
                          <div class="pic-type">
                            <div class="coverImg" v-if="self.threeModelUrl">
                              <Three3DView
                                :url="`${actionUrl}/system/fileCenter/preview/${self.threeModelUrl}`"
                              />
                            </div>
                            <div
                              class="coverImg"
                              v-if="self.imgUrl && !self.threeModelUrl"
                              :style="{
                                backgroundImage: `url(${actionUrl}/system/fileCenter/preview/${self.imgUrl})`,
                              }"
                            ></div>
                            <div
                              class="coverImg nodataImg"
                              v-if="!self.imgUrl && !self.threeModelUrl"
                            ></div>

                            <svg-icon
                              :icon-class="
                                self.equipMonitorStatusName === '报警'
                                  ? `guzhang`
                                  : self.equipMonitorStatusName === '离线'
                                  ? `tingchan`
                                  : ``
                              "
                            />
                          </div>
                        </div>
                        <div class="card-right">
                          <p class="card-name">
                            <span>设备编号</span
                            ><span class="numberLight">{{ self.equipId }}</span>
                          </p>
                          <p class="card-name">
                            <span>设备型号</span
                            ><span class="numberLight">{{
                              self.equipCode
                            }}</span>
                          </p>
                          <p class="card-name">
                            <span>位置</span
                            ><span class="numberLight">{{
                              self.locationName
                            }}</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import pic3 from "@/assets/images/noData2.png";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
import { mockList } from "./index";

defineOptions({
  name: "IOTDEVICEMONITOR",
  inheritAttrs: false,
});

// 图片地址
const actionUrl = import.meta.env.VITE_APP_BASE_API;

/*
  设备监控列表 — 数据定义
*/
const pageList: any = ref([]);
const pageLoading = ref(false);
const deviceLoading = ref(false);

/*
  设备监控列表 — 页签点击事件
*/
const activeIndex = ref("0");
const handleSelect = (key: string) => {
  activeIndex.value = key;
  const itemValue = pageList.value[key].itemValue;

  getDeviceList(itemValue);
};

/*
  设备监控列表 — 获取大类
*/
async function getPageList() {
  try {
    pageLoading.value = true;
    deviceLoading.value = true;
    const { data } = await request({
      url: `/iotadmin/deviceMonitor/getEquipCategory`,
      method: "get",
      data: {},
    });
    pageList.value = data || {};
    if (pageList.value.length) {
      handleSelect(activeIndex.value);
    } else {
      deviceLoading.value = false;
    }
    pageLoading.value = false;
  } catch (error) {
    pageLoading.value = false;
    deviceLoading.value = false;
  }
}

/*
  设备监控列表 — 获取位置列表
*/
const deviceList = ref(<any>[]);

async function getDeviceList(itemValue: string) {
  try {
    deviceLoading.value = true;
    const { data } = await request({
      url: `/iotadmin/deviceMonitor/queryEquipLocation/${itemValue}`,
      method: "get",
      data: {},
    });
    // deviceList.value = mockList;
    deviceList.value = data;
    deviceLoading.value = false;
  } catch (error) {
    deviceLoading.value = false;
  }
}

/*
  跳转至实时监控详情页面
*/
function jumpUrl(item: any) {
  router.push({
    name: "IOTDEVICEMONITORDETAIL",
    query: {
      equipCode: item.equipCode,
    },
  });
}

/*
  轮询定时器
*/
const timer = ref();
onMounted(() => {
  getPageList();
  timer.value = setInterval(() => getPageList(), 3 * 60 * 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
.table-container-scroll ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  li {
    display: inline-block;
    // width: 300px;
    flex-grow: 1;
    cursor: pointer;
    margin: 5px;
    max-width: 350px;
    min-width: 300px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    overflow: hidden;
    .greenFont {
      color: rgb(160, 230, 3);
    }
    .redFont {
      color: rgb(246, 64, 64);
    }
    .greyFont {
      color: grey;
    }
    .greenColor {
      color: darkslategrey;
      background: rgb(29, 233, 182);
    }
    .redColor {
      color: rgb(246, 64, 64);
      background: #fef0f0;
    }
    .greyColor {
      color: grey;
      background: rgba(0, 0, 0, 0.05);
    }
    .card-white-title {
      text-align: center;
      margin: 6px 6px 0;
      border-radius: 6px;
      padding: 8px 0;
      font-size: 15px;
      // letter-spacing: 1px;
      font-weight: 600;
    }
    p {
      padding: 0 14px;
      margin: 0;
      font-size: 13px;
      font-weight: 300;
      margin: 0;
      color: #86888a;
      overflow: hidden;
      line-height: 20px;
    }
    .card-item {
      position: relative;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
      .item_title {
        height: 38px;
        line-height: 38px;
        width: 100%;
        color: #31abe3;
        font-size: 16px;
        position: relative;
        z-index: 2;

        .title-inner {
          padding: 0;
          position: absolute;
          top: 27px;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          letter-spacing: 1px;
          background: #000;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .card-content {
        width: 100%;
        height: calc(100% - 38px - 6px);
        overflow: hidden;
        display: flex;
        align-items: center;
        .card-left {
          width: 50%;
          height: 100%;
          float: left;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 8px 0;
          .pic-type {
            position: relative;
            width: 90%;
            height: 100%;
            display: inline-block;
            svg {
              position: absolute;
              right: -15px;
              bottom: 0px;
              font-size: 28px;
              z-index: 9;
            }
            .coverImg {
              margin-top: 0;
              width: 100%;
              height: 100%;
              background-position: center;
              background-repeat: no-repeat;
              background-size: contain;
            }
            .nodataImg {
              background-image: url("../../../assets/images/no-device.png");
            }
          }

          .card-value {
            padding: 0 10px;
            span:nth-child(1) {
              display: block;
              margin-top: 5px;
              font-size: 16px;
              font-weight: 900;
              font-family: "DinLight";
            }
            span:nth-child(2) {
              display: block;
              font-size: 12px;
              line-height: 14px;
              margin-top: 5px;
            }
          }
        }
        .card-right {
          width: 50%;
          height: auto;
          padding-top: 8px;
          padding-bottom: 8px;
          float: right;
          .card-name {
            height: auto;
            margin-bottom: 5px;
            width: 92%;
            border: 1px solid #eee;
            background-color: rgba(172, 185, 227, 0.05) !important;
            margin-left: 2%;
            padding: 5px 0 0;
            span {
              font-size: 12px;
              display: block;
              text-align: center;
              line-height: 15px;
              padding: 0;
              word-break: break-all;
            }
            span:nth-child(1) {
              font-size: 12px;
              display: block;
            }
            span:nth-child(2) {
              font-weight: 400;
              margin: 3px 0;
              font-size: 13px;
              line-height: 18px;
              display: block;
              font-family: DINAlt;
              color: rgb(49, 52, 59);
            }
          }
          .card-name:nth-last-child(1) {
            margin-bottom: 0px;
          }
        }
      }
    }
  }
  li:hover {
    cursor: pointer;
    img {
      transform: scale(1.12);
    }
  }
}

.produce-c-title {
  font-weight: 600;
  margin: 20px 0 7px 20px;
  font-size: 16px;
  position: RELATIVE;
  padding-left: 15px;
  svg {
    width: 1em;
    height: 1em;
    font-size: 24px;
    transform: rotateZ(-268deg);
    position: absolute;
    left: -11px;
    top: -1px;
  }
}

.catalog {
  position: relative;
}

.catalog {
  :deep(.el-menu-item.is-active) {
    background-color: #2979ff !important;
    color: #fff !important;
  }
  :deep(.el-menu-item) {
    background-color: rgb(239, 240, 253) !important;
    font-size: 14px;
    margin-right: 10px;
    border-radius: 6px;
    width: auto;
    padding: 0px 30px;
    display: inline;
    line-height: 34px;
    border: none;
    float: left;
    margin-bottom: 10px;
  }
  :deep(.el-menu--horizontal.el-menu) {
    border-bottom: none !important;
    display: block !important;
    height: 34px;
    line-height: 34px;
  }
  :deep(.el-sub-menu) {
    color: #2979ff;
    background-color: transparent;
    width: 20px;
    float: left;
    display: inline;
    border: none;
    line-height: 34px;
    height: 34px;
    .el-icon {
      color: #2979ff;
      border: none;
    }
  }

  :deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
    background-color: transparent !important;
  }
  :deep(.el-sub-menu.is-active .el-sub-menu__title) {
    border-color: transparent !important;
  }
}
.el-menu--horizontal .el-menu .el-menu-item.is-active {
  background-color: rgb(239, 240, 253) !important;
  color: #2979ff !important;
  font-weight: bold !important;
}
</style>
